<template>
	<div>
	<div>
		<div id="shop_head">
			<a href="javascript:history.go(-1)"><img src="/static/imgm/img2/1.jpg"></a>
			<span>购物车</span>
			<img src="/static/imgm/img2/2.jpg">
		</div>

		<div v-if="!showstate">
			<div id="shopempty_main">
				<img src="/static/imgm/img2/kong.png">
				<p>购物车还是空的</p>
				<span>快去逛逛吧`</span>
				<a href="">那就看看呗</a>
			</div>


		</div>


		
		<div id="shop" v-if="showstate">
			
			<div id="shop_hint">
				<p>!</p><span>自营商品实付满88元免运费</span>
			</div>
			<div id="shop_self">
				<p></p>
				<img src="/static/imgm/img2/jx.png">
				<p>酒仙自营</p>
			</div>
			<div id="shop_main" v-for="l in list">
				<div class="main_top">
					<p>满减</p><p>购299元立享【满299元减50元】</p>
				</div>
				<div class="main_bottom">
					<p></p>
					<img :src="l.img">
					<a href="#" class="name">{{l.name}}</a>
					<span>{{l.productPromo.price | money}}</span>
					<span>冰点价</span>
					<p>-</p>
					<input type="text" v-model="l.num">
					<p>+</p>
					<a href="javascript:;">删除</a>
				</div>
			</div>
			<div id="shop_empty"></div>
			<div id="shop_foot">
				<p></p>
				<span>全选</span>
				<span>合计：</span>
				<span>优惠：</span>
				<span>{{total | money}}</span>
				<span>不优惠,滚~!</span>
				<a href="#">去结算(4)</a>

			</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				list : {}
			}
		},
		mounted(){
			this.list = this.$store.state.buys
			console.log(this.list)
			console.log(this.list)
		},
		computed: {
			total(){
				let t = 0;
				for(var i=0; i<this.list.length;i++) {
					t = t + (this.list[i].num*this.list[i].productPromo.price)
				}
				return t
			},
			showstate(){
				let i = 0;
				for( var k in this.list){
					i++;
				}
				return i>0?true:false;
			}
		},
		filters : {
			money(val){
			return "¥"+Number(val).toFixed(2)
		}
	}
		
	}
</script>


<style scoped>
.name{
	overflow: hidden;
	white-space: nowrap;
}
body{
			background:#fafafa; 
		}
		#shop_head{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80px;
			border-bottom: 1px solid #efefef;
			background: #fbfbfb;
		}
		#shop_head img:nth-child(1){
			width:35px;
			height:35px; 
		}
		#shop_head img:nth-child(3){
			width:35px;
			height:35px; 
		}
		#shop_head span:nth-child(2){
			font-size: 38px;
		}
		#shop_hint{
			width: 100%;
			height: 55px;
			background:#fff4e2; 
			line-height: 55px;
			margin-bottom: 1px solid #ffeaca;
			margin-bottom:15px; 
		}
		#shop_hint p{
			width: 20px;
			height: 20px;
			border: 1px solid red;
			border-radius: 50%;
			line-height: 20px;
			text-align: center;
			display: inline-block;
			margin:  0 8px;
			color: red;
		}
		#shop_hint span{
			font-size: 23px;
			color:#ff6f69; 
		}
		#shop_self{
			width: 100%;
			height:100px;
			border-bottom: 1px solid #f3f3f3; 
			line-height: 100px;
			position: relative;
		}
		#shop_self p:nth-child(1){
			width: 40px;
			height: 40px;
			border: 1px solid #8a8a8a;
			border-radius: 50%;
			display: inline-block;
			margin: 0 11px;
			position: absolute;
			top:25px;
			left: 12px; 
			color: #474747;
			background: url("/static/imgm/img2/right.jpg") no-repeat;
			background-size: 100%;
		}
		#shop_self img:nth-child(2){
			position: absolute;
			top: 30px;
			left: 90px;
		}
		#shop_self p:nth-child(3){
			display: inline-block;
			margin-left: 6px;
			font-size: 30px;
			position: absolute;
			top: -2px;
			left: 130px;
		}
		#shop_main{
			width: 100%;
			height:300px;
			position: relative; 
			background: #fff;
		}
		#shop_main .main_top{
			position: absolute;
			top: 8px;
			left:33px; 
			width:100%;
			height: 24px;
			border-bottom: 1px solid #fcfcfc;
			padding-bottom: 40px;
		}
		#shop_main .main_top p:nth-child(1){
			width:64px;
			height: 24px;
			border:2px solid #b8b8b8; 
			color: #c58cff; 
			text-align: center;
			line-height: 24px;
			position: absolute;
			top: 11px;
			left: 14px;
			font-size: 23px;
		}
		#shop_main .main_top p:nth-child(2){
			width:380px;
			height: 24px;
			line-height: 24px; 
			color: #333333;
			position:absolute;
			top:12px;
			left:97px; 
			font-size: 25px;  
		}
		#shop_main .main_bottom{
			width: 100%;
			height: 280px;
			position: absolute;
			top: 70px;
			left: 0;
		}
		#shop_main .main_bottom p:nth-child(1){
			width: 40px;
			height: 40px;
			border: 1px solid #8a8a8a;
			border-radius: 50%;
			display: inline-block;
			margin: 0 11px;
			position: absolute;
			top:63px;
			left: 12px; 
			color: #474747;
			background: url("/static/imgm/img2/right.jpg") no-repeat;
			background-size: 100%;
			color: red;
		}
		#shop_main .main_bottom img:nth-child(2){
			width:150px;
			height: 150px;
			border: 1px solid #ebebeb;
			position: absolute;
			top:5px;
			left: 90px; 
		}
		#shop_main .main_bottom a:nth-child(3){
			width: 450px;
			height: 100px;
			position: absolute;
			top: 11px;
			left:264px; 
			font-size: 28px;
			color: #333333;
		}
		#shop_main .main_bottom span:nth-child(4){
			position: absolute;
			top:86px;
			left:264px;  
			color: red;
		}
		#shop_main .main_bottom span:nth-child(5){
			position: absolute;
			top: 86px;
			left:370px; 
			display: inline-block;
			width: 93px;
			height: 38px;
			background:#ffa855; 
			text-align: center;
			line-height: 38px;
			border-radius: 3px;
			color: #fff;
		}
		#shop_main .main_bottom p:nth-child(6){
			width: 40px;
			height: 40px;
			position: absolute;
			left: 278px;
			bottom: 100px;
			text-align: center;
			line-height: 40px;
			border: 2px solid #e5e5e5;
			border-right: none;
		}
		#shop_main .main_bottom input:nth-child(7){
			width:50px;
			height: 40px; 
			position: absolute;
			left: 325px;
			bottom: 100px;
			font-size: 24px;
			line-height: 40px;
			text-align: center;
		}
		#shop_main .main_bottom p:nth-child(8){
			width: 40px;
			height: 40px;
			position: absolute;
			left: 378px;
			bottom: 100px;
			text-align: center;
			line-height: 40px;
			border: 2px solid #e5e5e5;
			border-left: none;
		}
		#shop_main .main_bottom a:nth-child(9){
			width: 90px;
			height: 38px;
			position: absolute;
			right: 20px;
			bottom: 100px;
			font-size:26px;
			color: #000;
			line-height: 38px;
			text-align: center;
		}

		#shop_empty{
			width: 100%;
			height:640px;
			background:#f3f5f6;  
		}
		#shop_foot{
			width: 100%;
			height:110px;
			background: pink; 
			position: fixed;
			bottom: 0;
			right: 0;
			left: 0;
		}
		#shop_foot p:nth-child(1){
			width: 40px;
			height: 40px;
			border: 1px solid #8a8a8a;
			border-radius: 50%;
			display: inline-block;
			margin: 0 11px;
			position: absolute;
			top:29px;
			left: 12px; 
			color: #474747;
			background: url("/static/imgm/img2/right.jpg") no-repeat;
			background-size: 100%;
			color: red;
		}
		#shop_foot span:nth-child(2){
			color:#828282;
			position: absolute;
			top: 38px;
			left:76px; 
		}
		#shop_foot span:nth-child(3){
			position: absolute;
			top:14px;
			left: 138px;
			font-size: 32px; 
		}
		#shop_foot span:nth-child(4){
			position: absolute;
			top:55px;
			left: 138px;
			font-size: 32px; 
		}
		#shop_foot span:nth-child(5){
			position: absolute;
			top:14px;
			left: 238px;
			font-size: 32px; 
			color: #ff5353;
			font-size: 34px;
		}
		#shop_foot span:nth-child(6){
			position: absolute;
			top:55px;
			left: 238px;
			font-size: 32px; 
		}
		#shop_foot a:nth-child(7){
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			font-size: 38px; 
			width: 200px;
			height: 110px;
			background:#fd5a5b;
			color: #fff; 
			text-align: center;
			line-height: 110px;
		}
		#shopempty_main{
			width:30%;
			height: 90vh;
			display: flex;
			flex-direction: column;
			align-items: center; 
			margin: 0 auto;
			margin-top:150px; 
		}
		#shopempty_main img:nth-child(1){
			width: 120px;
			height: 120px;
		}
		#shopempty_main p:nth-child(2){
			color: #717272;
			font-size: 26px;
			margin-top: 25px;
			font-family: "微软雅黑";
			margin-bottom: 13px;
		}
		#shopempty_main span:nth-child(3){
			color: #ababac;
			font-size: 22px;
		}
		#shopempty_main a:nth-child(4){
			display: block;
			width:120px;
			height: 40px;
			border: 2px solid #7e7e7e; 
			margin-top: 50px;
			line-height: 40px;
			text-align: center;
			color: #7a7a7a;
			background: #fff;
			border-radius: 5px;

		}

</style>